<template>
	<view>
		<!--登录提示-->
		<view class="login-hint" v-if="register">
			<view>登录后有更多惊喜等您呦</view>
      <view>
      <button style="line-height: 60rpx; font-size:22rpx;border-radius: 30rpx;background: #00AAA6;color: #fff;"
              type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
      </view>
		</view>
		<!-- 悬浮弹窗
		<view class="xuanfu">
			<view class="box">
				<image class="img" src="../../static/image/wutouxiang.png" mode=""></image>
				<view class="text">请登录后获取需求</view>
					<view class="button">
						<button class="back" >返回</button>
						<button class="denglu">登录</button>
					</view>
			</view>
		</view>
		-->
		<!--右下角操作按钮-->
		<view class="operate">
			<view v-if="isBack" class="image" @click="handleBackTop">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/zhiding.png" />
			</view>
			<view v-if="types.indexOf('toIndex') != -1" class="image" @click="toIndex()">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/backhome.png" />
			</view>
			<view v-if="types.indexOf('group') != -1 && currentUser.ifGroupQrCode" class="image" @click="$refs.lrPopup.open()">
				<image class="img" :src="imgUrl + '/statics/js/modules/applet/img/weixin2.png'" />
			</view>
			<view v-if="types.indexOf('mp') != -1" class="ggh" @click="$refs.mpPopup.open()">公众号</view>
			<view v-if="types.indexOf('add') != -1 && !register" class="add" @click="$refs.publishPopup.open()">
				<uni-icons class="icon" color="#fff" type="plusempty" size="18"></uni-icons>
				<view class="name">发布</view>
			</view>
			<view  v-show="this.samplebookId != 0" class="shareExhibitor" v-if="types.indexOf('ss') != -1" >
				<view class="shareText"   @click="toSampleBook()" 	>
					<view style="margin-bottom: 3px">查看</view>
					<view>样册</view>
				</view>
			</view>
			<view class="shareExhibitor" v-if="types.indexOf('se') != -1" >
				<view class="shareText"   @click="toShareExhibitor" 	>
					<view style="margin-bottom: 3px">海报</view>
					<view>分享</view>
				</view>
			</view>
			<view class="shareExhibitor" v-if="types.indexOf('sp') != -1" >
				<view class="shareText"   @click="toShareProduct" 	>
					<view style="margin-bottom: 3px">海报</view>
					<view>分享</view>
				</view>
			</view>
		</view>
		<!--加群-->
		<uni-popup ref="lrPopup" type="center">
			<view class="lr-module">
				<view class="c">
					<view class="yuan lefty"></view>
					<view class="yuan righty"></view>
					<view class="title">
						{{caption}}
					</view>
					<image show-menu-by-longpress="true" class="img" :src="groupImgUrl" mode="widthFix"></image>
				</view>
			</view>
			<view class="contact-close" @click="$refs.lrPopup.close()"><image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/layerCloseBtn.png" mode="widthFix" /></view>
		</uni-popup>
		<!--公众号-->
		<uni-popup ref="mpPopup" type="center">
			<view class="mp-module">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/login-background.png" mode="widthFix" />
				<view class="c">
					<view @click="$refs.mpPopup.close()" class="close">
            <uni-icons color="#79c8c4" type="closeempty" size="30"></uni-icons>
          </view>
					<image class="logo" src="https://m.nocexpo.com/statics/js/modules/h5/img/logo1.png" mode="widthFix" />
					<view class="b">扫描下方二维码</view>
					<view class="t">关注“金诺云展”公众号</view>
					<image show-menu-by-longpress=true class="qr" src="https://m.nocexpo.com/statics/js/modules/h5/img/scan_QR.png" mode="widthFix"></image>
					<view class="hint-text">获取最新消息提醒</view>
				</view>
			</view>
		</uni-popup>
		<!-- 发布 -->
		<uni-popup ref="publishPopup" type="bottom">
			<view class="publish-module">
				<view class="item" @click="uploadDemand()">
					<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/xuqiu.png" />
						发需求
			</view>
			<view class="item" @click="uploadImgText()">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/dongtai.png" />
						动态
			</view>
				<view class="item" @click="uploadVideo()">
				<image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/shipin.png" />
						小视频
					</view>
				<view class="close" @click="$refs.publishPopup.close()"><image class="img" src="https://m.nocexpo.com/statics/js/modules/h5/img/guanbi.png" /></view>
			</view>
		</uni-popup>
		
		<product-default-popup ref="productDefaultPopup" :title="proTitle" :subTitle="proSubTitle" :headerImg="proHeaderImg"
					:content="proContent"></product-default-popup>
		<exhibition-default-popup ref="exhibitionDefaultPopup" :title="exhTitle" :subTitle="exhSubTitle" :headerImg="exhHeaderImg"
					:content="exhContent"></exhibition-default-popup>
	</view>
</template>

<script>
import login from '@/api/login.js';
import commonMethod from '@/utils/commonMethod.js';
import commonApi from '@/utils/commonMethod.js';
import indexApi from '@/utils/request/index.js';
import productDefaultPopup from "@/components/posterPopup/productDefaultPopup.vue";
import exhibitionDefaultPopup from "@/components/posterPopup/exhibitionDefaultPopup.vue";
export default {
	components: {
		productDefaultPopup,
		exhibitionDefaultPopup
	},
	data() {
		return {
			isBack: false,
			currentUser:{},
			imgUrl: indexApi.baseUrl,
      caption:'',
			groupImgUrl:'',
      register: false
		};
	},
	props: {
		/**
		 * 显示的悬浮按钮（mp公众号,group交流群）,逗号分隔
		 *
		 */
		types: {
			type: String,
			default: ''
		},
		productId:{
			type: Number,
			default: 0
		},
		sampleBook:{
			type: Object,
			default: {}
		},
		samplebookId:{
			type: Number,
			default: 0
		},
		
		proHeaderImg:{
		    type: String,
		    default: ''
		},
		proTitle:{
		    type: String,
		    default: ''
		},
		proSubTitle:{
		    type: String,
		    default: ''
		},
		proContent:{
		    type: String,
		    default: ""
		},
		proBackgroundImg:{
		    type: String,
		    default: ''
		},
		proCodeImg:{
		    type: String,
		    default: ''
		},
		
		
		exhHeaderImg:{
		    type: String,
		    default: ''
		},
		exhTitle:{
		    type: String,
		    default: ''
		},
		exhSubTitle:{
		    type: String,
		    default: ''
		},
		exhContent:{
		    type: String,
		    default: ""
		},
		exhBackgroundImg:{
		    type: String,
		    default: ''
		},
		exhCodeImg:{
		    type: String,
		    default: ''
		}
	},
	computed: {
		scrollTopFn() {
			return this.$store.state.scrollTop;
		}
	},
	watch: {
		/**
		 * 监听scroll-view 滚动高度
		 * @param {Object} value
		 */
		scrollTopFn(value) {
			if (value > 300) {
				this.isBack = true;
			} else {
				this.isBack = false;
			}
		}

	},
	async created(){
		this.getCurrentUser();
		//判断是否登录
		this.register = await commonApi.getUserLoginFlag();
		console.log('register=', this.register);
	},
	onShow() {
	},
  async mounted() {
	},

	methods: {
		setRegister(register){
			this.register = register
		},
		toSampleBook(){
			uni.navigateTo({
				url:'/components/webview/webview?url=' + encodeURIComponent(this.sampleBook.bookUrl)
			})
		},
		
		toShareProduct(){
			if (this.register) {
			  // 跳转登录
			  uni.redirectTo({
				url: '/pages/account/login/login'
			  })
			  return
			}
			this.$refs.productDefaultPopup.showCanvas(this.proBackgroundImg,this.proHeaderImg,this.proCodeImg);
		},
		toShareExhibitor(){
			if (this.register) {
			  // 跳转登录
			  uni.redirectTo({
				url: '/pages/account/login/login'
			  })
			  return
			}
			this.$refs.exhibitionDefaultPopup.showCanvas(this.exhBackgroundImg,this.exhHeaderImg,this.exhCompanyImg,this.exhCodeImg);
		},
		uploadImgText(){
			console.log("发布动态");
			uni.redirectTo({
				url: '/pages/product/imageText/uploadImgText'
			})
		},
		uploadVideo(){
			console.log("发布视频");
			uni.redirectTo({
				url: '/pages/product/vidoDetail/uploadVideo??t=f'
			})
		},
		uploadDemand(){
			console.log("发布需求");
			uni.redirectTo({
				url: '/pages/tabBar/new/newDemand'
			})
		},
		getQrCode(){
			commonApi.groupQrCode(this.currentUser.id).then(res =>{
				this.caption = res.data.groupQrCode.caption;
				this.groupImgUrl = res.data.groupQrCode.qrCode;
			})
		},
	
		getCurrentUser(){
			commonApi.currentUserAxios().then(res =>{
				this.currentUser = res.data.session_user_h5;
				this.getQrCode();
			});
		},
    async getCurrentUser1(response,url){
			commonApi.currentUserAxios().then(res =>{
				this.currentUser = res.data.session_user_h5;
        uni.setStorageSync("userId", this.currentUser.id);
				commonApi.updUserInfo(this.currentUser.id,this.currentUser.type)
				commonApi.updLogUserLogin(this.currentUser)
        //登录后清除弹窗状态
        //localStorage.removeItem("ifPop");
        if (!response.data.url) {
          uni.switchTab({
            url: '/pages/tabBar/index/index'
          })
        }
        if (response.data.url.includes("/h5login")) {
          uni.switchTab({
            url: '/pages/tabBar/index/index'
          })
        } else if (response.data.url.includes("store") || response.data.url.includes("exhibition")
            || response.data.url.includes("productDetail") || response.data.url.includes("showroom")
            || response.data.url.includes("liveDetail") || response.data.url.includes("takePartInAct")
            || response.data.url.includes("dailyTask") || response.data.url.includes("vidoDetail") || response.data.url.includes("need")) {
          uni.redirectTo({
            url: url,

          })
        } else {
          uni.switchTab({
            url: '/pages/tabBar/index/index',
            success: function (e) {
              let page = getCurrentPages().pop();
              if (page == undefined || page == null) {
                return;
              }
              page.onLoad();
            }
          })
        }
			});
		},	

    // 获取手机号
    getPhoneNumber(e) {
      let that = this;
      login.getPhoneNumber({code: e.detail.code}).then(function (res) {
        if(res.data.code == 0){
          //调用登录方法
          if(res.data.phonenumber != "" && res.data.phonenumber != null){
            that.login(res.data.phonenumber, '052930');
          }else{
            return;
          }
        }
      })

    },

    // 公共登录方法
    async login(phone, verificationCode) {
      const pages = await getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const url = currentPage.$page.fullPath //当前页面全路径，包括参数
      let that = this
      //登录
      //	todo 表单验证功能待做
      await login.login(
          url,
          {
            phone: phone,
            verificationCode: verificationCode,
            appletSourceUserId : uni.getStorageSync("sourceId")
          }
      ).then(function (response) {
        if (response.data.code === 0) {
          that.register = false;
		  uni.setStorageSync("register",1);
          console.log(response.cookies)
          //记录cookies
		  // let ss= commonMethod.currentUserAxios();
	
		  commonMethod.currentUserAxios().then(res =>{
			  console.log(res);
			  // let ifRecentLogin=res.data.session_user_h5.currentUser.ifRecentLogin
		  		uni.setStorageSync('zt',res.data.session_user_h5.ifRecentLogin)
		  });
          if (response.cookies && response.cookies.length > 0) {
            for (let i = 0; i < response.cookies.length; i++) {
              let cookie = response.cookies[i];
              if (cookie.indexOf('SESSION') >= 0) {
                uni.setStorageSync('cookie', cookie);
              }
            }
          }
          console.log(response);
          //登录后，获取用户存入登录记录表
          that.getCurrentUser1(response,url);
          // commonApi.updUserInfo(that.currentUser.id,that.currentUser.type)
        } else {
          layer.open({
            anim: '提示',
            content: response.data.msg,
            btn: ['确定'],
            yes: function (index) {
              layer.close(index)
            }
          });
        }
      }).catch(function (error) {
      });
    },
	toIndex(){
		uni.switchTab({
		  url: '/pages/tabBar/index/index'
		})
	},

    handleBackTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100
			});
			if (this.$parent.backTop) {
				this.$parent.backTop();
			}
		}
	},

	onPageScroll(res) {
		if (res.scrollTop > 500) {
			this.isBack = true;
		} else {
			this.isBack = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.publish-module {
	position: absolute;
	right: 2 * $interval;
	bottom: 60rpx;
	z-index: 3;
	.item {
		width: 232rpx;
		height: 96rpx;
		background: linear-gradient(95deg, #f63737 0%, #ff7c45 100%);
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;
		color: #fff;
		.img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 16rpx;
		}
	}
	.close {
		padding: $interval 0px;
		text-align: right;
		.img {
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.mp-module {
	width: 560rpx;
	position: relative;
	.img {
		width: 100%;
		display: block;
	}
	.c {
		position: absolute;
		width: 100%;
		padding-top: 65rpx;
		z-index: 3;
		left: 0px;
		top: 0px;
		.close {
			position: absolute;
			right: 5rpx;
			top: 10rpx;
		}
		.logo {
			width: 130rpx;
			display: block;
			margin: auto;
		}
		.b {
			color: #24918b;
			margin-top: 35rpx;
			text-align: center;
			font-size: $font-size-max + 10;
			font-weight: bold;
		}
		.t {
			text-align: center;
			color: #24918b;
			margin-top: 18rpx;
			font-weight: 600;
		}
		.qr {
			display: block;
			margin: 60rpx auto 65rpx;
			width: 330rpx;
		}
		.hint-text {
			color: #24918b;
			text-align: center;
		}
	}
}
.lr-module {
	width: 600rpx;
	background: #0484a1;
	border-radius: 36rpx;
	padding-top: 70rpx;
	padding-bottom: 130rpx;
	.c {
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
		width: 490rpx;
		margin: auto;
		text-align: center;
		.yuan {
			width: 30rpx;
			height: 30rpx;
			background: #0484a1;

			border-radius: 15rpx;
			position: absolute;
			top: 100rpx;
			z-index: 3;
		}
		.lefty {
			left: -15rpx;
		}
		.righty {
			right: -15rpx;
		}
		.title {
			padding: 45rpx 0px 30rpx;
			margin: 0px 60rpx;
			color: #006880;
			border-bottom: 2rpx dashed #006880;
		}
		.img {
			width: 420rpx;
			display: block;
			margin: 40rpx auto 0px;
		}
	}
}
.contact-close {
	padding: 48rpx;
	text-align: center;
	.img {
		width: 60rpx;
	}
}
	
.xuanfu{
	position: fixed;
		left: 0px;
		width: 92%;
		height: 100%;
		bottom: 170rpx;
		padding: 0px 3% 0px 5%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-size: $font-size-min;
	    z-index: 99;
}
.box{
	width: 672rpx;
	height: 438rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	.img{
		position: relative;
		left:40%;
		top:-10%;
		width: 152rpx;
		height: 152rpx;

	}
	.text{
		width: 320rpx;
		height: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #2E2D2D;
		line-height: 56rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin: 0 auto;
	}
}
.button{
	display: flex;
	margin-top: 20px;
	.back{
		width: 240rpx;
		height: 76rpx;
		background: #F2F3F5;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 28rpx;
		color: #A1A0A0;
	}
	.denglu{
		width: 240rpx;
		height: 76rpx;
		background: linear-gradient( 180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
.login-hint {
	position: fixed;
	left: 0px;
	width: 92%;
	height: 80rpx;
	bottom: 170rpx;
	padding: 0px 3% 0px 5%;
	border-radius: 40rpx;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: $font-size-min;
  z-index: 99;
	.url {
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		width: 120rpx;
		background: $color-primary;
	}
}
.operate {
	position: fixed;
	width: 84rpx;
	right: $interval;
	bottom: 15%;
	z-index: 36;
	.add {
		width: 84rpx;
		height: 79rpx;
		background: linear-gradient(50deg, #f63737 0%, #ff7c45 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(247, 69, 58, 0.42);
		color: #fff;
		border-radius: 50%;
		margin-top: $interval;
		text-align: center;
		padding-top: 5rpx;

		.name {
			font-size: $font-size-min;
			margin-top: -10rpx;
		}
	}
	.image {
		height: 84rpx;
		border-radius: 50%;
		background-color: $bg-color;
		margin-top: $interval;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.ggh {
		margin-top: $interval;
		text-align: center;
		line-height: 84rpx;
		font-size: $font-size-min;
		color: #fff;
		border-radius: 50%;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
	}
}
.shareExhibitor{
	width: 80rpx;
	height: 80rpx;
	margin-top: 30rpx;
	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	overflow: hidden;
	text-align: center;
	font-size: 20rpx;
	line-height: 25rpx;

}
.shareText{
	padding-top: 15rpx;
	background: linear-gradient(270deg, rgb(84, 214, 210) 0%, rgb(0, 170, 166) 100%);
	height: 80rpx;
	color: rgb(255, 255, 255);
}
</style>
